<template>
  <div class="portal-container">
    <el-container>
      <!-- 导航栏 -->
      <Navigator @returnUserInfo="getUserInfo"></Navigator>
      <!-- 主体内容 -->
      <el-main>
        <!-- 搜索栏 -->
        <Search :cartList="cartList"></Search>

        <!-- 分类、轮播图、登录 -->
        <div class="main-wrap">
          <!-- 分类 -->
          <div class="category">
            <h2>分类</h2>
            <ul class="category-list">
              <li
                v-for="firstCategory in firstCategoryList"
                :key="firstCategory.sort"
              >
                <i :class="`iconfont ${firstCategory.icon}`"></i>
                <router-link :to="`/firstCategory/${firstCategory.fId}`">{{
                  firstCategory.fName
                }}</router-link>
              </li>
            </ul>
            <div class="findMore">
              <router-link to="/findMore">查看更多&gt;</router-link>
            </div>
          </div>

          <!-- 轮播图 -->
          <div class="banner">
            <el-carousel trigger="click" type="card" indicator-position="none">
              <el-carousel-item
                class="banner-item"
                v-for="(item, index) in bannerList"
                :key="index"
              >
                <el-image
                  fit="cover"
                  :src="require(`@/assets/banner/${index + 1}.jpg`)"
                ></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>

          <!-- 右边用户信息wrap -->
          <div class="user-info-wrap">
            <!-- 已登录用户信息 -->
            <div class="login-user-info" v-if="userInfo.userName">
              <div class="avatar">
                <el-image
                  fit="cover"
                  :src="require('@/assets/no-login-avatar.jpg')"
                ></el-image>
              </div>
              <p class="username">
                你好，<strong>{{ userInfo.nickName }}</strong>
              </p>
              <div class="detail-info">
                <div class="detail-item">
                  <span class="shopping-amount">0</span>
                  <span>购物车</span>
                </div>
                <div class="detail-item">
                  <span class="shopping-amount">0</span>
                  <span>待收货</span>
                </div>
                <div class="detail-item">
                  <span class="shopping-amount">0</span>
                  <span>待发货</span>
                </div>
                <div class="detail-item">
                  <span class="shopping-amount">0</span>
                  <span>待付款</span>
                </div>
                <div class="detail-item">
                  <span class="shopping-amount">0</span>
                  <span>待评价</span>
                </div>
              </div>
            </div>
            <!-- 未登录用户信息 -->
            <div class="user-info" v-else>
              <!-- 头像 -->
              <div class="avatar">
                <el-image
                  fit="cover"
                  :src="require('@/assets/no-login-avatar.jpg')"
                ></el-image>
              </div>
              <!-- 登录名 -->
              <p class="username">你好，清先登录</p>
              <div class="action">
                <router-link to="/login">
                  <el-button round type="danger" class="login">登录</el-button>
                </router-link>

                <router-link to="/login?action=register">
                  <el-button round type="primary" class="register"
                    >注册</el-button
                  >
                </router-link>
              </div>
            </div>

            <div class="info">
              <div class="info-item">
                <i class="iconfont icon-shoucang"></i>
                <span>宝贝收藏</span>
              </div>
              <div class="info-item">
                <i class="iconfont icon-lishi"></i>
                <span>我的足迹</span>
              </div>
              <div class="info-item">
                <i class="iconfont icon-dingdan"></i>
                <span>我的订单</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 猜你喜欢 -->
        <div class="guess-wrap">
          <h3 class="guess-header">
            <span class="title">猜你喜欢</span>
            <img src="@/assets/recommendation.png" />
          </h3>

          <div class="recommend-content clearfix">
            <GoodsItem
              v-for="goods in goodsList"
              :key="goods.gId"
              :goods="goods"
            />
          </div>
        </div>
      </el-main>

      <!-- 脚部 -->
      <Footert />
    </el-container>
  </div>
</template>

<script>
import { pagingQueryGoods } from "@/api/goods";
import { getFirstCategoryList } from "@/api/firstCategory";
import GoodsItem from "@/components/goods-item";
import Footert from "@/components/footer";
import { getCartItems } from "@/api/cart";
import Navigator from "@/components/navigator";
import Search from "@/components/search";
import { mapState } from "vuex";

export default {
  name: "PortalIndex",
  components: { GoodsItem, Navigator, Search, Footert },
  props: {},
  data() {
    return {
      searchText: "", // 搜索关键字
      bannerList: [
        "@/assets/banner/1.jpg",
        "@/assets/banner/2.jpg",
        "@/assets/banner/3.jpg",
        "@/assets/banner/4.jpg",
        "@/assets/banner/5.jpg",
      ],
      userInfo: {}, // 用户信息
      page: 1, // 页码
      pageSize: 24, // 一页数据量
      goodsList: [], // 数据
      firstCategoryList: [], // 一级分类列表
      cartList: [], // 用户购物车信息
    };
  },
  created() {
    // 监听浏览器窗口大小发生变化
    this.listenWindowSize();
    // 监听滚动条是否到底
    this.listenScrollToBottom();
    // 第一次加载商品数据
    this.loadGoods();
    // 加载分类
    this.loadFirstCategory();
  },
  mounted() {},
  methods: {
    // 监听浏览器窗口大小发生变化
    listenWindowSize() {
      window.onresize = () => {
        let items = document.querySelectorAll("div.recommend-item");
        if (window.innerWidth <= 1500) {
          // 小于1500，将item宽度设为440px
          items.forEach((item) => {
            item.style.width = "440px";
          });
        } else {
          // 大于1500，将item宽度设为330px
          items.forEach((item) => {
            item.style.width = "330px";
          });
        }
      };
    },
    // 监听滚动条的滑动
    listenScrollToBottom() {
      let timer = null;
      window.addEventListener("scroll", () => {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;

        //滚动条到底部的条件
        if (scrollTop + windowHeight >= scrollHeight - 300) {
          // 节流
          clearTimeout(timer);
          timer = setTimeout(() => {
            this.loadGoods();
          }, 200);
        }
      });
    },
    // 获取一级分类列表
    async loadFirstCategory() {
      try {
        const { data } = await getFirstCategoryList();
        this.firstCategoryList = data.data.slice(0, 8);
      } catch (err) {
        console.log(err);
      }
    },
    // 分页加载数据
    async loadGoods() {
      // 只加载6页数据
      if (this.page > 6) {
        return;
      }
      try {
        const { data } = await pagingQueryGoods(this.page, this.pageSize);
        let records = data.data.records;
        this.goodsList.push(...records);
        // 下次请求就是获取下一页数据
        this.page++;
      } catch (err) {
        console.log(err);
      }
    },
    // 接收导航栏返回的userInfo
    getUserInfo(userInfo) {
      this.userInfo = userInfo;
      this.loadUserCartList();
    },
    // 跳转到购物车页面
    toCart() {
      if (!this.user) {
        return this.$router.push("/login");
      }
      this.$router.push("/cart");
    },
    // 获取购物车数据
    async loadUserCartList() {
      let userId = this.userInfo.userId;
      let { data } = await getCartItems(userId);
      if (Number(data.code) === 200) {
        this.cartList = data.data;
      }
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {},
};
</script>

<style scoped lang="less">
.portal-container {
  background-color: #e9e7e8;

  .el-container {
    flex-direction: column;
  }
}

/* 主体 */
:deep(.el-main) {
  background-color: #e9e7e8;
  padding: unset;
  overflow: unset;
  // min-width: 820px;
  min-width: 1573px;
  .main-wrap {
    border-radius: 20px 20px 0 0;
    overflow-y: unset;
    overflow-x: unset;
    box-sizing: border-box;
    width: 85%;
    min-width: 1430px;
    height: 423px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .category {
      border-radius: 20px;
      flex: 1;
      background-color: #f7f9fa;
      min-width: 220px;

      h2 {
        margin: 0;
        padding: 20px 0 0 20px;
        font: 20px tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
        font-weight: 700;
      }

      .category-list {
        padding: 20px 0 0 20px;

        li {
          height: 28px;
          font: 14px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53",
            sans-serif;
          margin-bottom: 10px;
          line-height: 28px;

          i.iconfont {
            margin-right: 12px;
            font-size: 18px;
          }

          a:hover {
            text-decoration: underline;
            text-decoration-color: #ff4746;
          }
        }

        li:hover > a,
        li:hover {
          color: #ff4746;
        }
      }

      .category-list li:nth-last-child(1) {
        margin-bottom: unset;
      }

      .findMore {
        height: 21px;

        a {
          float: right;
          margin-right: 20px;
        }

        a:hover {
          text-decoration: underline;
          color: #ff4746;
          cursor: pointer;
        }
      }
    }

    .banner {
      flex: 3;
      min-width: 837px;
      padding: 0 10px 0 10px;

      .el-carousel {
        border-radius: 15px;
        height: 100%;

        .el-carousel__container {
          background-color: #f7f9fa;
          height: 100%;

          .banner-item {
            .el-image {
              height: 100%;
            }
          }
        }
      }
    }

    .user-info-wrap {
      .avatar {
        .el-image {
          border-radius: 50%;
        }
      }

      border-radius: 20px;
      background-color: #f7f9fa;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      min-width: 280px;

      .login-user-info {
        height: 170px;
        min-width: 280px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .detail-info {
          width: 100%;
          display: flex;
          justify-content: space-around;
          font: 14px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53",
            sans-serif;

          .detail-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .shopping-amount {
              color: #ff4746;
              font-weight: 700;
            }

            span:hover {
              color: #ff4746;
              cursor: pointer;
            }
          }
        }
      }

      .user-info {
        text-align: center;
        height: 170px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-weight: 700;
        font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53",
          sans-serif;

        .avatar {
          .el-image {
            border-radius: 50%;
          }
        }

        .username {
          color: #3c3c3c;
          font-size: 16px;
          font-weight: bold;
        }

        .username:hover {
          color: #ff4746;
          cursor: pointer;
        }

        .action {
          display: flex;
          justify-content: space-evenly;
          align-items: center;

          .login {
            border: unset;
            background-color: #ff5e02;
          }

          .register {
            border: unset;
            background-color: #ff7709;
          }
        }
      }

      .info {
        // height: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .info-item {
          cursor: pointer;
          height: 50px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          font-size: 10px;
          font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53",
            sans-serif;

          .iconfont {
            font-size: 25px;
          }
        }

        .info-item:hover {
          color: #ff4746;
        }
      }
    }
  }

  .guess-wrap {
    transition: height 0.5s;
    border-radius: 0 0 20px 20px;
    min-width: 1430px;
    background-color: #fff;
    width: 85%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;

    .guess-header {
      margin-left: 6px;
      margin-bottom: 20px;
      font-size: 24px;
      height: 24px;
      line-height: 24px;
      font-weight: 700;
      color: #111;
      position: relative;

      img {
        position: absolute;
        height: 20px;
        margin: 4px 0 0 6px;
      }
    }
  }
}

/* 脚部 */

/* 设置下拉框样式 */
.el-dropdown-menu {
  padding: 5px 0;

  .el-dropdown-menu__item {
    min-width: 60px;

    span {
      display: block;
    }
  }

  .el-popper {
    margin-top: unset;
  }
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
</style>
